<template>
  <div class="easy-container-min custom-table-item flex align-items-center p-x-8">
    <el-avatar :src="space.avatar" class="m-r-10" />
    <div>
      <div class="title line1" style="max-width: 30rem;">{{ space.title }}</div>
      <p class="line1" style="max-width: 30rem;" :title="space.desc">{{ space.desc }}</p>
    </div>
    <el-button
      :type="btnDisplay.type"
      size="small"
      @click="addSpace"
      :disabled="btnDisplay.disabled"
      v-text="btnDisplay.label"
      class="m-l-auto"
    />
  </div>
</template>

<script>
export default {
  name: 'related-spaces-add-search-result-space-box',
  props: {
    space: {
      type: Object,
      required: true,
    },
    btnDisplay: {
      type: Object,
      required: true,
    },
  },
  methods: {
    addSpace() { this.$emit('addSpace', this.space); },
  },
};
</script>

<style></style>
